import { useState, useEffect } from 'react';

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue] as const;
}

export const useLocalStorageContent = {
  code: `import { useState, useEffect } from 'react';

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue] as const;
}`,
  
  explanation: `这个Hook提供了一个简单的方式来管理localStorage中的数据。

主要特性：
1. 自动序列化和反序列化JSON数据
2. 错误处理机制
3. 支持函数式更新
4. TypeScript类型安全

使用场景：
- 保存用户偏好设置
- 缓存表单数据
- 持久化应用状态`,
  
  usage: `// 使用示例
const [user, setUser] = useLocalStorage('user', { name: '', email: '' });

// 更新用户信息
setUser({ name: '张三', email: 'zhangsan@example.com' });

// 函数式更新
setUser(prev => ({ ...prev, name: '李四' }));`,
  
  practice: {
    title: 'useLocalStorage 练习',
    description: '练习使用 useLocalStorage Hook 来管理用户偏好设置'
  }
}
